/**承包商列表页面 */
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-input
        v-model="listQuery.contractorName"
        placeholder="公司名称"
        style="width: 20%;"
        class="filter-item queryParam"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.contractorNo"
        placeholder="组织机构代码"
        style="width: 20%;"
        class="filter-item queryParam"
        @keyup.enter.native="handleFilter"
      />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >
        添加
      </el-button>
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-clean" @click="handleReset">
        重置
      </el-button>
    </div>

    <!-- Note that row-key is necessary to get a correct row order. -->
    <el-table
      ref="dragTable"
      v-loading="listLoading"
      :data="list"
      row-key="id"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >

      <el-table-column style="width: 10%" align="center" label="编号" prop="id" />

      <el-table-column style="width: 30%" label="公司名称">
        <template slot-scope="scope">
          <span @click="handleDetail(scope.row)">{{ scope.row.contractorName }}</span></template>
      </el-table-column>
      <el-table-column style="width: 30%" align="center" label="组织机构代码">
        <template slot-scope="scope">

          <span @click="handleDetail(scope.row)">{{ scope.row.contractorNo }}</span></template>
      </el-table-column>
      <el-table-column class-name="status-col" label="营业执照" width="110">
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileBusinessLicense== 1" type="primary" size="small" @click="handlegetFile(scope.row)">营业执照</el-button>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="资质证书" width="110">
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileCertification== 1" type="primary" size="small" @click="handlegetFile(scope.row)">资质证书</el-button>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="安全协议" width="110">
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileSecurityProtocol== 1" type="primary" size="small" @click="handlegetFile(scope.row)">安全协议</el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="审核状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">申请中..</span>

          <span v-if="scope.row.status==1">已通过</span>
          <span v-if="scope.row.status==-1">已驳回</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" style="width: 30%">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status==-1" type="primary" size="small" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-if="scope.row.status==-1" type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fechData"
    />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="90%">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="150px" style="width: 400px; margin-left:50px;">
        <el-form-item v-if="hidden" label="编号" prop="id">
          <el-input v-model="temp.id" />
        </el-form-item>
        <el-form-item label="公司名称" prop="contractorName">
          <el-input v-model="temp.contractorName" />
        </el-form-item>
        <el-form-item label="组织结构代码" prop="contractorNo">
          <el-input v-model="temp.contractorNo" />
        </el-form-item>
        <el-form-item label="营业执照">
          <ul>
            <div> 
              <el-upload
                v-model="file"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-form-item>
        <el-form-item label="资质证书">
          <ul>
            <div> 
              <el-upload
                v-model="file1"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile1"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-form-item>
        <el-form-item label="安全协议">
          <ul>
            <div> 
              <el-upload
                v-model="file2"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile2"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="addRow">新增</el-button>
      <el-table :data="workerList">
        <el-table-column v-if="hidden" align="center" label="id" prop="id" />
        <el-table-column v-if="hidden" align="center" label="deleted" prop="deleted" />
        <el-table-column style="width: 10%" align="center" label="身份证号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workerNo" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="姓名">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workerName" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="年龄">
          <template slot-scope="scope">
            <el-input v-model="scope.row.age" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="身份信息">
          <ul>
            <div> 
              <el-upload
                v-model="file3"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile3"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="特种作业证件">
          <ul>
            <div> 
              <el-upload
                v-model="file4"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile4"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="个人承诺书">
          <ul>
            <div> 
              <el-upload
                v-model="file5"
                class="upload-demo"
                action="http://localhost:8080/ehs_files/upload"
                :on-change="handleChange"
                :on-success="uploadfile5"
              ><el-button size="big" type="primary">点击上传</el-button>
              </el-upload>
            </div>
          </ul>.
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="临时/长期">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isLong">
              <el-option
                v-for="(item, index) in selectOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="工种">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workType" type="text" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="特殊工种">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isSpecial">
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="培训">
          <template slot-scope="scope">
            <el-select v-model="scope.row.train">
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="合格时间">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.qualifiedDate" type="date" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="有效期">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.validDate" type="date" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="是否有效">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isValid">
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submitData">
          保存
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetailVisible" width="90%">
      <el-form ref="dataForm" :rules="rules" :model="temp" :inline="true" class="demo-form-inline">
        <el-form-item v-if="hidden" label="编号" prop="id">
          <el-input v-model="temp.id" />
        </el-form-item>
        <el-form-item label="公司名称" prop="contractorName">
          <el-input v-model="temp.contractorName" readonly="readonly" />
        </el-form-item>
        <el-form-item label="组织结构代码" prop="contractorNo">
          <el-input v-model="temp.contractorNo" readonly="readonly" />
        </el-form-item>
      </el-form>
      <el-table :data="workerList">
        <el-table-column v-if="hidden" align="center" label="id" prop="id" />
        <el-table-column v-if="hidden" align="center" label="deleted" prop="deleted" />
        <el-table-column style="width: 10%" align="center" label="身份证号">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workerNo" type="text" readonly="readonly"  />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="姓名">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workerName" type="text"  readonly="readonly" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="年龄">
          <template slot-scope="scope">
            <el-input v-model="scope.row.age" type="text" readonly="readonly"  />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="身份信息">
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileIdentityInfo== 1" type="primary" size="small" @click="handlegetFile(scope.row)">身份信息</el-button>
        </template>
      </el-table-column>
      <el-table-column style="width: 10%" align="center" label="特种作业证件">
        <template slot-scope="scope">
          <el-button v-if="scope.row.fileSpecialCertif== 1" type="primary" size="small" @click="handlegetFile(scope.row)">特种作业证件</el-button>
        </template>
      </el-table-column>
      <el-table-column style="width: 10%" align="center" label="个人承诺书">
        <template slot-scope="scope">
          <el-button v-if="scope.row.filePersonCommit== 1" type="primary" size="small" @click="handlegetFile(scope.row)">个人承诺书</el-button>
        </template>
      </el-table-column>
        <el-table-column style="width: 10%" align="center" label="临时/长期">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isLong" disabled>
              <el-option
                v-for="(item, index) in selectOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="工种">
          <template slot-scope="scope">
            <el-input v-model="scope.row.workType" type="text" readonly="readonly"  />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="特殊工种">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isSpecial" disabled>
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="培训">
          <template slot-scope="scope">
            <el-select v-model="scope.row.train" disabled>
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="合格时间">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.qualifiedDate" type="date" readonly="readonly" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="有效期">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.validDate" type="date" readonly="readonly" />
          </template>
        </el-table-column>
        <el-table-column style="width: 10%" align="center" label="是否有效">
          <template slot-scope="scope">
            <el-select v-model="scope.row.isValid" disabled>
              <el-option
                v-for="(item, index) in selectIsOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
import ElDragSelect from '@/components/DragSelect' // base on element-ui
import MarkdownEditor from '@/components/MarkdownEditor'
import { contractorList, contractorDetailList, addContractor, editContractor, deleteContractor } from '@/api/contractor'
import Vue from 'vue'
import Sortable from 'sortablejs'
import { parseTime } from '@/utils'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { getuserbyemp } from '@/api/user'
import checkPermission from '@/utils/permission'
import { getFileName } from '@/api/file'

export default {
  name: 'Contractor',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }

  },
  data() {
    return {
      hidden: false,
      id: '',
      type: 'contractor',
      file: null,
      file1: null,
      file2: null,
      file3: null,
      file4: null,
      file5: null,
      limitNum: 1,
      formLabelWidth: '80px',
      fileList: [],

      list: null,
      total: 0,
      listLoading: true,
      editList: null,
      deptName: null,
      userName: null,
      sortable: null,
      oldList: [],
      newList: [],
      // 下拉框选项
      selectOptions: [
        {
          label: '临时',
          value: 0,
          isSelected: true
        },
        {
          label: '长期',
          value: 1
        }
      ],
      selectIsOptions: [
        {
          label: '否',
          value: 0,
          isSelected: true
        },
        {
          label: '是',
          value: 1
        }
      ],
      // 参数条件
      listQuery: {
        page: 1,
        limit: 20,
        contractorName: null,
        contractorNo: null

      },
      temp: {},
      dialogFormVisible: false,
      dialogStatus: '',
      dialogDetailVisible: false,
      textMap: {
        update: '编辑',
        create: '添加',
        detail: '查看'
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {},
      downloadLoading: false,
      // 查看明细行数据
      workerList: []
    }
  },
  created() {
    this.fechData()
  },
  methods: {
    ccc1(row) {
      console.log(row)
    },
    fechData() {
      contractorList(this.listQuery).then(response => {
        console.log(response)
        this.listLoading = true
        this.total = response.p.total
        this.list = response.p.records
        this.showList = response.p.records
        console.log('Data:' + response.p.records)
        this.listLoading = false
        // this.oldList = response.map(v => v.id)
        //  this.newList = response.map(v => v.id).slice()
      })
    },
    handleCreate() {
      let row = {
        id: '',
        contractorName: '',
        contractorNo: ''
      }
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1) // copy obj

      this.temp.timestamp = new Date(this.temp.timestamp)
      this.workerList = []
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    //重置
    handleReset() {
      this.listQuery = {
        contractorName: null,
        contractorNo: null
      }
    },
    // 编辑
    handleEdit(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1) // copy obj

      this.temp.timestamp = new Date(this.temp.timestamp)
      this.workerList = []
      this.dialogStatus = 'edit'
      this.dialogFormVisible = true
      var param = {}
      param.worker = {}
      param.worker.contractor = {}
      param.worker.contractor.id = row.id
      contractorDetailList(param).then((response) => {
        this.workerList = response.p.records
      })
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    // 验证提交数据
    verifyData() {
      // 判断workerList是否为空
      var flagAllName = true; var flagAllNo = true; var flagNo = true; var flagName = true; var flagAge = true; var flagType = true
      if (this.temp.contractorName == '' || this.temp.contractorName == null) {
        flagAllName = false
      }
      if (this.temp.contractorNo == '' || this.temp.contractorNo == null) {
        flagAllNo = false
      }
      for (var item of this.workerList) {
        if (item.workerNo == '') {
          flagNo = false
        }
        if (item.workerName == '') {
          flagName = false
        }
        if (item.age == '') {
          flagAge = false
        }
        if (item.workType == '') {
          flagType = false
        }
      }
      var msg = ''
      msg += flagAllName == false ? '公司名称,' : ''
      msg += flagAllNo == false ? '组织机构代码,' : ''
      msg += flagNo == false ? '身份证号,' : ''
      msg += flagName == false ? '姓名,' : ''
      msg += flagAge == false ? '年龄,' : ''
      msg += flagType == false ? '工种' : ''
      msg += '不可以为空'
      if (!flagAllName || !flagAllNo || !flagNo || !flagName || !flagAge || !flagType) {
        this.$notify({
          title: '提示',
          message: msg,
          type: 'warning',
          duration: 2000
        })
        return false
      } else {
        return true
      }
    },
    // 提交操作
    submitData() {
      if (this.verifyData() && this.dialogStatus === 'create') {
        this.createData()
      } else if (this.verifyData() && this.dialogStatus === 'edit') {
        this.updateData()
      }
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if(this.file == null){
          alert("请上传营业执照！")
        }
        if(this.file1 == null){
          alert("请上传资质证书！")
        }
        if(this.file2 == null){
          alert("请上传安全协议！")
        }
        // alert(this.file3.filename)
        // alert(this.file3.filesId)
        // alert(this.file4.filename)
        // alert(this.file4.filesId)
        // alert(this.file5.filename)
        if (valid) {
          // 问题所在：select选择后不返回数据到选择框
          if(this.file3 == null){
            if(this.file4 == null){
              if(this.file5 == null){
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename,
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename,
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename,
                    filesId: this.file2.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              } else{
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file5: {
                    fileName: this.file5.filename, 
                    filesId: this.file5.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }
            } else{
              if(this.file5 == null){
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file4: {
                    fileName: this.file4.filename, 
                    filesId: this.file4.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              } else{
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file4: {
                    fileName: this.file4.filename, 
                    filesId: this.file4.filesId
                  },
                  file5: {
                    fileName: this.file5.filename, 
                    filesId: this.file5.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }
            }
          }else {
            if(this.file4==null){
              if(this.file5==null){
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file3: {
                    fileName: this.file3.filename, 
                    filesId: this.file3.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }else{
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file3: {
                    fileName: this.file3.filename, 
                    filesId: this.file3.filesId
                  },
                  file5: {
                    fileName: this.file5.filename, 
                    filesId: this.file5.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }
            }else{
              if(this.file5==null){
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                  file3: {
                    fileName: this.file3.filename, 
                    filesId: this.file3.filesId
                  },
                  file4: {
                    fileName: this.file4.filename, 
                    filesId: this.file4.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              } else {
                const data = {
                  contractor: {
                    contractorNo: this.temp.contractorNo,
                    contractorName: this.temp.contractorName,
                    workers: this.workerList
                  },
                  file: {
                    fileName: this.file.filename, 
                    filesId: this.file.filesId
                  },
                  file1: {
                    fileName: this.file1.filename, 
                    filesId: this.file1.filesId
                  },
                  file2: {
                    fileName: this.file2.filename, 
                    filesId: this.file2.filesId
                  },
                   file3: {
                    fileName: this.file3.filename, 
                    filesId: this.file3.filesId
                  },
                  file4: {
                    fileName: this.file4.filename, 
                    filesId: this.file4.filesId
                  },
                  file5: {
                    fileName: this.file5.filename, 
                    filesId: this.file5.filesId
                  }
                }
                addContractor(data).then(() => {
                  this.dialogFormVisible = false
                  this.$notify({
                    title: 'Success',
                    message: '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                })
              }
              
            }
          }
          this.fechData()
        }
      })
    },

    handlegetFile(row) {
      
      this.id = row.id
      this.type = 'contractor'

      const query = { id: this.id, type: this.type }
      console.log('query is  ' + query)
      // 获取附件名称
      getFileName(query).then(response => {
        this.file = response.file
        console.log('MMMMMMMMMMMMMMMMMMMMMMMM' + this.file)
        const url = 'http://localhost:8080/ehs_files/getfile?id=' + this.id + '&type=' + this.type // 创建下载链接
        const link = document.createElement('a') // 创建a标签
        link.style.display = 'none' // 将a标签隐藏
        link.href = url // 给a标签添加下载链接
        link.setAttribute('download', this.file.filename) // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
        document.body.appendChild(link)
        link.click() // 执行a标签
      })
    },

    handleChange() {

    },
    uploadfile(response, file, fileList) {
      this.file = response.file
    },
    uploadfile1(response, file1, fileList) {
      this.file1 = response.file
    },
    uploadfile2(response, file2, fileList) {
      this.file2 = response.file
    },
    uploadfile3(response, file3, fileList) {
      this.file3 = response.file
    },
    uploadfile4(response, file4, fileList) {
      this.file4 = response.file
    },
    uploadfile5(response, file5, fileList) {
      this.file5 = response.file
    },
    handleDownload() {

    },
    showReviewer() { 

    },
    handleFilter() {
      this.listQuery.page = 1
      this.fechData()
    },
    handleDelete(row) {
      {
        this.$confirm('确定删除?', 'Warning', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async() => {
            deleteContractor({ id: row.id }).then(response => {
            })
            this.fechData()
            this.$message({
              type: 'success',
              message: 'Delete succed!'
            })
          })
          .catch(err => { console.error(err) })
      }
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = {
            contractor: {
              id: this.temp.id,
              contractorNo: this.temp.contractorNo,
              contractorName: this.temp.contractorName,
              workers: this.workerList
            }
          }
          editContractor(data).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: '修改成功',
              type: 'success',
              duration: 2000
            })
            this.fechData()
          })
        }
      })
    },
    handleDetail(row) {
      const row1 = JSON.parse(JSON.stringify(row))
      this.temp = Object.assign({}, row1) // copy obj

      this.temp.timestamp = new Date(this.temp.timestamp)

      this.workerList = []
      this.dialogStatus = 'detail'
      this.dialogDetailVisible = true

      var param = {}
      param.worker = {}
      param.worker.contractor = {}
      param.worker.contractor.id = row.id
      contractorDetailList(param).then((response) => {
        this.workerList = response.p.records
      })
    },
    setSort() {
      const el = this.list[0]

      this.sortable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', // Class name for the drop placeholder,
        setData: function(dataTransfer) {
          // to avoid Firefox bug
          // Detail see : https://github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: evt => {
          const targetRow = this.list.splice(evt.oldIndex, 1)[0]
          this.list.splice(evt.newIndex, 0, targetRow)

          // for show the changes, you can delete in you code
          const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
          this.newList.splice(evt.newIndex, 0, tempIndex)
        }
      })
    },
    // 新增明细行
    addRow() {
      const workerListDefault = {
        workerNo: '',
        workerName: '',
        age: '',
        isLong: 1,
        workType: '',
        isSpecial: 0,
        train: 0,
        qualifiedDate: '',
        validDate: '',
        isValid: 1
      }
      Vue.set(this.workerList, this.workerList.length, workerListDefault)
    },
    // 删除明细行
    deleteRow(n) {
      Vue.delete(this.workerList, n)
    }
  }
}
</script>

<style>
  .sortable-ghost {
    opacity: .8;
    color: #fff !important;
    background: #42b983 !important;
  }
</style>

<style scoped>
  .icon-star {
    margin-right: 2px;
  }

  .drag-handler {
    width: 20px;
    height: 20px;
    cursor: pointer;
  }

  .show-d {
    margin-top: 15px;
  }
</style>
